<template>
  <el-tabs type="border-card">
    <el-tab-pane label="自定义图标">
      <h2>使用方法</h2>
      <p style="line-height: 50px">
        本项目使用 Element Plus 官方图标库。例如：（共{{ iconList.length }}个图标）
      </p>
      <p class="example-p">
        <!-- 使用 Element Plus 官方图标组件 -->
        <el-icon :size="30" color="#ff5900"><wallet-filled /></el-icon>
        <span>&lt;el-icon&gt;&lt;wallet-filled /&gt;&lt;/el-icon&gt;</span>
      </p>
      <p class="example-p">
        <el-icon :size="30" color="#fd5656"><chat-dot-round /></el-icon>
        <span>&lt;el-icon&gt;&lt;chat-dot-round /&gt;&lt;/el-icon&gt;</span>
      </p>
      <p class="example-p">
        <el-icon :size="30" color="#ffc300"><star-filled /></el-icon>
        <span>&lt;el-icon&gt;&lt;star-filled /&gt;&lt;/el-icon&gt;</span>
      </p>
      <br />
      <div style="display: flex">
        <h2>图标</h2>
        <div class="search-box">
          <el-input
            class="search"
            size="large"
            v-model="keyword"
            clearable
            placeholder="请输入图标名称"
          ></el-input>
        </div>
        <div></div>
      </div>
      <ul>
        <li class="icon-li" v-for="(item, index) in list" :key="index">
          <div class="icon-li-content">
            <!-- 使用 Element Plus 官方图标组件 -->
            <el-icon :size="36" color="#606266">
              <component :is="getIconName(item)" />
            </el-icon>
            <span>{{ item }}</span>
          </div>
        </li>
      </ul>
    </el-tab-pane>
    <el-tab-pane label="Element图标">
      <el-link
        type="primary"
        href="https://element-plus.org/zh-CN/component/icon.html#icon-collection"
        target="_blank"
      >
        前往官方文档查看
      </el-link>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts" name="icon">
import { computed, ref } from 'vue';

// 创建一个函数来获取对应的图标名称
const getIconName = (itemName: string) => {
  // 根据原始的图标名称映射到 Element Plus 图标组件名称
  // 注意：这里我们使用一个简化的映射，只映射部分图标
  const iconMap: Record<string, string> = {
    attentionforbid: 'Warning',
    attentionforbidfill: 'Warning',
    attention: 'InfoFilled',
    attentionfill: 'InfoFilled',
    tag: 'CollectionTag',
    tagfill: 'CollectionTag',
    people: 'User',
    peoplefill: 'UserFilled',
    notice: 'Bell',
    noticefill: 'BellFilled',
    mobile: 'Phone',
    mobilefill: 'PhoneFilled',
    voice: 'Microphone',
    voicefill: 'Microphone',
    unlock: 'Unlock',
    lock: 'Lock',
    home: 'House',
    homefill: 'HouseFilled',
    delete: 'Delete',
    deletefill: 'DeleteFilled',
    notification: 'Bell',
    notificationfill: 'BellFilled',
    notificationforbidfill: 'Bell',
    like: 'Star',
    likefill: 'StarFilled',
    comment: 'ChatDotRound',
    commentfill: 'ChatDotRound',
    camera: 'Camera',
    camerafill: 'CameraFilled',
    warn: 'Warning',
    warnfill: 'Warning',
    time: 'Timer',
    timefill: 'TimerFilled',
    location: 'Location',
    locationfill: 'LocationFilled',
    favor: 'Star',
    favorfill: 'StarFilled',
    skin: 'Shirt',
    skinfill: 'Shirt',
    news: 'Document',
    newsfill: 'Document',
    record: 'Timer',
    recordfill: 'TimerFilled',
    emoji: 'Star', // 使用相近的图标替代
    emojifill: 'StarFilled', // 使用相近的图标替代
    message: 'Message',
    messagefill: 'MessageFilled',
    goods: 'Goods',
    goodsfill: 'GoodsFilled',
    crown: 'Trophy',
    crownfill: 'Trophy',
    move: 'Position', // 使用相近的图标替代
    add: 'Plus', // 使用相近的图标替代
    hot: 'HotWater',
    hotfill: 'HotWater',
    service: 'Service', // 使用相近的图标替代
    servicefill: 'Service', // 使用相近的图标替代
    present: 'Gift',
    presentfill: 'Gift',
    pic: 'Picture',
    picfill: 'PictureFilled',
    rank: 'Sort',
    rankfill: 'Sort',
    male: 'Male',
    female: 'Female',
    down: 'ArrowDown',
    top: 'ArrowUp',
    recharge: 'Money',
    rechargefill: 'Money',
    forward: 'Right',
    forwardfill: 'Right',
    info: 'InfoFilled',
    infofill: 'InfoFilled',
    redpacket: 'Wallet',
    redpacket_fill: 'WalletFilled',
    roundadd: 'CircleCheck',
    roundaddfill: 'CircleCheckFilled',
    friendadd: 'User',
    friendaddfill: 'UserFilled',
    cart: 'ShoppingCart',
    cartfill: 'ShoppingCart',
    more: 'More',
    moreandroid: 'More',
    back: 'Back',
    right: 'Right',
    shop: 'Shop',
    shopfill: 'Shop',
    question: 'QuestionFilled',
    questionfill: 'QuestionFilled',
    roundclose: 'CircleClose',
    roundclosefill: 'CircleClose',
    roundcheck: 'CircleCheck',
    roundcheckfill: 'CircleCheckFilled',
    global: 'Position',
    mail: 'Message',
    punch: 'Timer',
    exit: 'Close',
    upload: 'Upload',
    uploadfill: 'Upload',
    read: 'Reading',
    file: 'Document',
    link: 'Link',
    full: 'FullScreen',
    group: 'User',
    friend: 'User',
    profile: 'User',
    addressbook: 'Tickets',
    calendar: 'Calendar',
    text: 'Document',
    copy: 'CopyDocument',
    share: 'Share',
    wifi: 'Connection',
    vipcard: 'User',
    weibo: 'Scissor',
    remind: 'AlarmClock',
    refresh: 'RefreshRight',
    filter: 'Filter',
    settings: 'Setting',
    settingsfill: 'Setting',
    scan: 'Search',
    qrcode: 'Crop',
    cascades: 'List',
    apps: 'Apple',
    sort: 'Sort',
    searchlist: 'Search',
    search: 'Search',
    edit: 'Edit',
    'apple-line': 'Apple',
    'baidu-fill': 'Baidu',
    'amazon-fill': 'Amazon',
    'netease-cloud-music-fill': 'NeteaseCloudMusic',
    'qq-line': 'Qq',
    'wechat-fill': 'Wechat',
    'alipay-fill': 'Alipay',
    'android-fill': 'Android',
    'android-line': 'Android',
    'whatsapp-line': 'Whatsapp',
    'whatsapp-fill': 'Whatsapp',
    'bilibili-fill': 'Bilibili',
    'chrome-fill': 'Chrome',
    'dingding-fill': 'Dingtalk',
    'dingding-line': 'Dingtalk',
    'apple-fill': 'Apple',
    'github-fill': 'Github',
    'qq-fill': 'Qq',
    'wechat-pay-fill': 'WechatPay',
    'windows-line': 'Windows',
    'windows-fill': 'Windows',
    'youtube-line': 'Youtube',
    'youtube-fill': 'Youtube',
    'wechat-pay-line': 'WechatPay',
    'zhihu-line': 'Zhihu',
  };

  // 获取映射的图标名称
  const iconName = iconMap[itemName];

  // 如果找到了映射的图标名称，则返回
  if (iconName) {
    return iconName;
  }

  // 如果没有找到对应的图标，则返回默认的警告图标
  return 'Warning';
};

const iconList: Array<string> = [
  'attentionforbid',
  'attentionforbidfill',
  'attention',
  'attentionfill',
  'tag',
  'tagfill',
  'people',
  'peoplefill',
  'notice',
  'noticefill',
  'mobile',
  'mobilefill',
  'voice',
  'voicefill',
  'unlock',
  'lock',
  'home',
  'homefill',
  'delete',
  'deletefill',
  'notification',
  'notificationfill',
  'notificationforbidfill',
  'like',
  'likefill',
  'comment',
  'commentfill',
  'camera',
  'camerafill',
  'warn',
  'warnfill',
  'time',
  'timefill',
  'location',
  'locationfill',
  'favor',
  'favorfill',
  'skin',
  'skinfill',
  'news',
  'newsfill',
  'record',
  'recordfill',
  'emoji',
  'emojifill',
  'message',
  'messagefill',
  'goods',
  'goodsfill',
  'crown',
  'crownfill',
  'move',
  'add',
  'hot',
  'hotfill',
  'service',
  'servicefill',
  'present',
  'presentfill',
  'pic',
  'picfill',
  'rank',
  'rankfill',
  'male',
  'female',
  'down',
  'top',
  'recharge',
  'rechargefill',
  'forward',
  'forwardfill',
  'info',
  'infofill',
  'redpacket',
  'redpacket_fill',
  'roundadd',
  'roundaddfill',
  'friendadd',
  'friendaddfill',
  'cart',
  'cartfill',
  'more',
  'moreandroid',
  'back',
  'right',
  'shop',
  'shopfill',
  'question',
  'questionfill',
  'roundclose',
  'roundclosefill',
  'roundcheck',
  'roundcheckfill',
  'global',
  'mail',
  'punch',
  'exit',
  'upload',
  'uploadfill',
  'read',
  'file',
  'link',
  'full',
  'group',
  'friend',
  'profile',
  'addressbook',
  'calendar',
  'text',
  'copy',
  'share',
  'wifi',
  'vipcard',
  'weibo',
  'remind',
  'refresh',
  'filter',
  'settings',
  'scan',
  'qrcode',
  'cascades',
  'apps',
  'sort',
  'searchlist',
  'search',
  'edit',
  'apple-line',
  'baidu-fill',
  'amazon-fill',
  'netease-cloud-music-fill',
  'qq-line',
  'wechat-fill',
  'alipay-fill',
  'android-fill',
  'android-line',
  'whatsapp-line',
  'whatsapp-fill',
  'bilibili-fill',
  'chrome-fill',
  'dingding-fill',
  'dingding-line',
  'apple-fill',
  'github-fill',
  'qq-fill',
  'wechat-pay-fill',
  'windows-line',
  'windows-fill',
  'youtube-line',
  'youtube-fill',
  'wechat-pay-line',
  'zhihu-line',
];

const keyword = ref('');
const list = computed(() => {
  return iconList.filter(item => {
    return item.indexOf(keyword.value) !== -1;
  });
});
</script>

<style scoped>
.example-p {
  height: 45px;
  display: flex;
  align-items: center;
}

.search-box {
  text-align: center;
  margin-top: 10px;
}

.search {
  width: 300px;
}

ul,
li {
  list-style: none;
}

.icon-li {
  display: inline-block;
  padding: 10px;
  width: 120px;
  height: 120px;
}

.icon-li-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-li-content i {
  font-size: 36px;
  color: #606266;
}

.icon-li-content span {
  margin-top: 10px;
  color: #787878;
}

.iframe {
  width: 100%;
  height: 700px;
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
